<template>
  <v-bottom-sheet v-model="visable" inset>
    <v-card class="rounded-t-lg">
      <v-card-title class="text-title text-xl"> 播放列表 </v-card-title>
      <v-divider></v-divider>
      <v-card-text class="px-0 py-0">
        <v-virtual-scroll style="height: 300px" :items="playerList" ref="listRef">
          <template v-slot:default="{ item, index }">
            <v-list-item v-ripple @click="handleClick(item, index)" :key="item._id">
              <v-list-item-title>
                <span class="text-subtitle">
                  {{ item.xuhao }}
                </span>
                <span class="text-title ml-2">
                  {{ item.mulu }}
                </span>
              </v-list-item-title>
              <template v-slot:append>
                <v-list-item-action v-if="item._id === info?._id && !paused">
                  <ListItemPlayLoading color="#d1d5db" />
                </v-list-item-action>
                <v-list-item-action v-if="item._id === info?._id && paused">
                  <span class="text-subtitle text-sm">待播放</span>
                </v-list-item-action>
              </template>
            </v-list-item>
          </template>
        </v-virtual-scroll>
      </v-card-text>
    </v-card>
  </v-bottom-sheet>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import ListItemPlayLoading from "@/components/ListItemPlayLoading.vue";
export default {
  name: "bootomList",
  components: { ListItemPlayLoading },
  computed: {
    ...mapGetters(["t"]),
    ...mapState("audio", ["paused", "playerList", "info"]),
    currentIndex() {
      return this.playerList.findIndex((item) => item._id === this.info?._id);
    },
  },
  data() {
    return {
      visable: false,
    };
  },

  methods: {
    open() {
      this.visable = true;
      this.$nextTick(() => {
        this.$refs.listRef.scrollToIndex(this.currentIndex || 0);
      });
    },
    close() {
      this.visable = false;
    },
    handleClick(item, index) {
      this.$emit("bootomlistclick", item, index);
      this.close();
    },
  },
};
</script>

<style scoped></style>
